<template>
    <el-row class="w-full" :gutter="20">
        <el-col :span="8">
            <transition name="el-fade-in-linear">
                <el-card :body-style="{ padding: '0px' }" ref="card" v-show="cardAVisible" style="max-height: 800px">
                    <div slot="header" class="flex justify-between">
                        <span>含有工具栏的卡片</span>
                        <span>
                            <i class="el-icon-arrow-up mr-2 cursor-pointer" @click="spreadCard" v-show="cardACollapse"></i>
                            <i class="el-icon-arrow-down mr-2 cursor-pointer" @click="collapseCard" v-show="!cardACollapse"></i>
                            <i class="el-icon-refresh mr-2 cursor-pointer" @click="refreshCard"></i>
                            <i class="el-icon-close mr-2 cursor-pointer" @click="closeCard"></i>
                        </span>
                    </div>
                    <div class="block">
                        <el-image
                                :src="url"
                                fit="cover"></el-image>
                    </div>
                    <div style="padding: 14px;">
                        <span>好吃的汉堡</span>
                    </div>
                </el-card>
            </transition>
        </el-col>
        <el-col :span="8">
            <el-card v-show="cardAVisible">
                <div slot="header" class="flex justify-between">
                    <span>含有padding的卡片</span>
                </div>
                <div class="block">
                    <el-image
                            :src="url"
                            fit="cover"></el-image>
                </div>
                <div style="padding: 14px;">
                    <span>好吃的汉堡</span>
                    <div class="flex justify-between mt-4">
                        <el-button type="primary" class="button">查看</el-button>
                        <el-button type="primary" class="button">收藏</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card v-show="cardAVisible" style="height: 600px;">
                <div slot="header" class="flex justify-between">
                    <span>Echart图表</span>
                </div>
                <v-chart :options="polar"/>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import 'echarts/lib/chart/line'
    import 'echarts/lib/component/polar'
    export default {
        name: "index",
        data() {
            let data = []
            for (let i = 0; i <= 360; i++) {
                let t = i / 180 * Math.PI
                let r = Math.sin(2 * t) * Math.cos(2 * t)
                data.push([r, i])
            }
            return {
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                cardAVisible: true,
                cardACollapse: false,
                polar: {
                    title: {
                        text: '极坐标双数值轴'
                    },
                    legend: {
                        data: ['line']
                    },
                    polar: {
                        center: ['50%', '54%']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    angleAxis: {
                        type: 'value',
                        startAngle: 0
                    },
                    radiusAxis: {
                        min: 0
                    },
                    series: [
                        {
                            coordinateSystem: 'polar',
                            name: 'line',
                            type: 'line',
                            showSymbol: false,
                            data: data
                        }
                    ],
                    animationDuration: 2000
                },
            }
        },
        methods: {
            collapseCard() {
                this.$refs.card.$el.style.maxHeight='58px';
                this.cardACollapse = true;
            },
            spreadCard() {
                this.$refs.card.$el.style.maxHeight='800px';
                this.cardACollapse = false;
            },
            refreshCard() {

            },
            closeCard() {
                this.cardAVisible = false;
            }
        }
    }
</script>

<style scoped>
</style>